<template>
  <!-- 财务对账单详情 -->
  <div>
    <div class="topBtnWrap">
      <div></div>
      <div>上传状态：{{ createDictText(formData.isUpload, '9708') }}</div>
    </div>
    <!-- 主要内容 -->
    <div class="mainContainer">
      <h2>财务对账单</h2>
      <p>厂家代码：{{ formData.denum }}</p>
      <p class="mgbtm20">厂家名称：{{ formData.denam }}</p>
      <p class="content">截止{{ formData.enddat }}，我公司共欠贵公司贷款{{ Math.abs(formData.pnamt) }}元，其中包含未到期期票{{ Math.abs(formData.fiamt) }}元，请贵公司核对确认</p>
      <p class="content">{{ formData.boatet }}</p>
      <p class="content">{{ formData.firemk }}</p>
      <p class="compInfo mgtop30">一气-大众汽车有限公司</p>
      <p class="compInfo">财务管理部长春财务科</p>
      <p class="compInfo">{{ formData.alodat }}</p>
    </div>
    <!-- 结论 -->
    <div>
      <p class="subTitle">结论</p>
      <div class="signWrap">
        <div class="signItem">
          <p>1.记录相符，(调整未达账项后双方年末金额一致的，视同记录相符)</p>
          <el-checkbox v-model="formData.status" true-label="1" false-label="0" label="记录相符"></el-checkbox>
          <div class="stampWrap">
            <p class="stampText">(公司财务专用盖章)</p>
            <div class="signData">
              <div class="props">日期：</div>
              <!-- v-model="formData.handleDate" -->
              <el-date-picker
                v-model="selectDate1"
                value-format="yyyy-MM-dd"
                :disabled="!selectedStatus"
                style="width: 130px!important"
                size="mini"
                type="date"
                placeholder="选择日期时间"
              ></el-date-picker>
            </div>
            <div class="signData">
              <div class="props">经办人：</div>
              <!-- v-model="formData.handlePerson" -->
              <el-select v-model="handlePerson1" filterable :disabled="!selectedStatus" placeholder="请选择经办人" style="width: 130px!important" size="mini">
                <el-option v-for="(item, index) in peopleList" :key="index" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="signItem">
          <p>2.记录不符，请列明不符项目及具体内容。(仅反映非时间性差异)</p>
          <el-checkbox v-model="formData.status" true-label="0" false-label="1" label="记录不符"></el-checkbox>
          <p>备注</p>
          <el-input v-model="formData.remarks" :disabled="selectedStatus" type="textarea" :rows="2" label="请输入不符项目"></el-input>
          <div class="stampWrap">
            <p class="stampText stampText2">(公司财务专用盖章)</p>
            <div class="signData">
              <div class="props">日期：</div>
              <!-- v-model="formData.handleDate" -->
              <el-date-picker
                v-model="selectDate2"
                value-format="yyyy-MM-dd"
                :disabled="selectedStatus"
                style="width: 130px!important"
                size="mini"
                type="date"
                placeholder="选择日期时间"
              ></el-date-picker>
            </div>
            <div class="signData">
              <div class="props">经办人：</div>
              <!-- v-model="formData.handlePerson" -->
              <el-select v-model="handlePerson2" :disabled="selectedStatus" placeholder="请选择经办人" style="width: 130px!important" size="mini">
                <el-option v-for="(item, index) in peopleList" :key="index" :label="item.text" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 联系人 -->
    <div>
      <p class="subTitle">为方便业务沟通，请务必留下以下人员的联系电话</p>
      <FilterTable
        ref="table"
        height="auto"
        :dataSource="tableDataList"
        :isSelectColumn="false"
        :isToperInfo="false"
        :isPagination="false"
        :isColumnFilter="false"
        :columns="tableColumns"
        columnsRef="partPartOtherPartFinancialStatementDetial"
        :onColumnsChange="columns => (this.tableColumns = columns)"
      ></FilterTable>
    </div>
    <!-- 底部版权信息 -->
    <div class="copyRightWrap">
      <p>一汽-大众汽车有限公司 | 中国安庆路5号 | 邮编： 130011</p>
      <p>电话：+860431 85990114 | 传真：+860431 85990130 | www.faw-vw.com</p>
      <p>FAW.CO.LTD. | NO.5 | Anqing Road | Changchun | P.C.130011</p>
      <p>T +860431 85990114 | F +860431 85990130 | www.faw-vw.com</p>
    </div>

    <!-- 底部按钮区 -->
    <div class="bottomBtnWrap">
      <el-button type="primary" @click="handlePrint">打印</el-button>
      <AjaxButton type="primary" :disabled="formData.isUpload == '97081002'" :click="handleUpload">上传</AjaxButton>
      <AjaxButton type="primary" :disabled="formData.isUpload == '97081002'" :click="handSave">保存</AjaxButton>
    </div>

    <!-- 人员选择弹窗 -->
    <BaseDialog :visible.sync="salerSelectVisible" destroyOnClose title="选择人员" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <salerSelect :index="salerSelectIndex" :type="salerSelectType" @close="salerSelectVisible = false" @onConfirm="handleSalerSelectConfirm" />
    </BaseDialog>

    <!-- 打印 -->
    <BasePrint ref="print" :data="printData" template="part/partOther/partFinancialStatement/templatePartFinancialStatementPrint" />
  </div>
</template>

<script>
import { queryPartFinancialStatementDetailById, savePartFinancialStatementDetailById, uploadPartFinancialStatement, queryAllSaler } from '@/api/part/partOther/partFinancialStatement/index.js';
import { dictionary } from '@/utils/dictMixin';
import { formatdate, messageAction, notifyAction } from '@/utils';

import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';

import salerSelect from './salerSelect';

export default {
  components: {
    salerSelect
  },
  mixins: [dictionary],
  props: {
    detail: {
      type: Object
    }
  },
  data() {
    return {
      formData: {},
      peopleList: [], // 人员列表
      tableColumns: this.createTableCoumns(),
      tableDataList: this.createTableData(), // table数据
      salerSelectVisible: false,
      salerSelectIndex: '', // 人员选择弹窗index(回显数据用)
      salerSelectType: '',
      printData: {}, // 打印数据
      selectDate1: '', // 记录相符日期
      selectDate2: '', // 记录不符日期
      handlePerson1: '', // 记录相符经办人
      handlePerson2: '' // 记录不符符经办人
    };
  },
  computed: {
    selectedStatus() {
      return this.formData.status == 1;
    }
  },
  watch: {
    //
    selectDate1(newVal, oldVal) {
      this.formData.handleDate = newVal;
    },
    selectDate2(newVal, oldVal) {
      this.formData.handleDate = newVal;
    },
    handlePerson1(newVal, oldVal) {
      this.formData.handlePerson = newVal;
    },
    handlePerson2(newVal, oldVal) {
      this.formData.handlePerson = newVal;
    }
  },
  created() {
    if (this.detail.id) {
      this.queryResponsiblePerson();
      this.initData(this.detail.id);
    }
  },
  methods: {
    createTableCoumns() {
      return [
        {
          title: '',
          dataIndex: 'type'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          render: params => {
            return (
              <el-input placeholder="请选择" value={params.row.name} readonly size="mini">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  onClick={() => {
                    this.handlePartChoseSaler(params.row);
                  }}
                ></el-button>
              </el-input>
            );
          }
        },
        {
          title: '联系电话',
          dataIndex: 'tel',
          editRequired: true,
          editable: true,
          defaultEditable: true,
          editType: 'number',
          editDisableRender: params => {
            return <el-input value={params.row.tel}></el-input>;
          }
        }
      ];
    },
    createTableData() {
      return [
        {
          type: '经销商财务人员',
          code: 'FINANCE_MANAGER',
          name: '',
          tel: ''
        },
        {
          type: '经销商配件经理',
          code: 'PART_MANAGER',
          name: '',
          tel: ''
        },
        {
          type: '经销商服务经理',
          code: 'SERVE_MANAGER',
          name: '',
          tel: ''
        },
        {
          type: '经销商索赔员',
          code: 'CLAIMER',
          name: '',
          tel: ''
        }
      ];
    },
    // 点击人员选择
    handlePartChoseSaler(e) {
      this.salerSelectIndex = e.$index;
      this.salerSelectType = e.code;
      this.salerSelectVisible = true;
    },
    // 人员选择点击确定
    handleSalerSelectConfirm(e) {
      this.tableDataList[e.index].name = e.salerInfo.employeeName;
      this.tableDataList[e.index].userId = e.salerInfo.userId;
    },
    // 初始化查询数据
    async initData(id) {
      let res = await queryPartFinancialStatementDetailById({
        id
      });
      if (res.resultCode == 200) {
        let data = res.data[0];
        for (let item in data) {
          this.$set(this.formData, item, data[item]);
        }
        this.formData.status = this.formData.status == null ? '1' : this.formData.status;
        this.tableDataList[0].userId = data.vfiPerson;
        this.tableDataList[0].name = data.vfiPersonName;
        this.tableDataList[0].tel = data.vfiPersonTel;

        this.tableDataList[1].userId = data.spaManger;
        this.tableDataList[1].name = data.spaMangerName;
        this.tableDataList[1].tel = data.spaMangerTel;

        this.tableDataList[2].userId = data.svcManger;
        this.tableDataList[2].name = data.svcMangerName;
        this.tableDataList[2].tel = data.svcMangerTel;

        this.tableDataList[3].userId = data.clmPerson;
        this.tableDataList[3].name = data.clmPersonName;
        this.tableDataList[3].tel = data.clmPersonTel;
      }
    },
    // 整理人员电话信息
    computeSalerInfo() {
      console.log(this.tableDataList);
      return {
        vfiPerson: this.tableDataList[0].userId, // 经销商财务人员
        vfiPersonName: this.tableDataList[0].name,
        vfiPersonTel: this.tableDataList[0].tel,
        spaManger: this.tableDataList[1].userId, // 经销商配件经理
        spaMangerName: this.tableDataList[1].name,
        spaMangerTel: this.tableDataList[1].tel,
        svcManger: this.tableDataList[2].userId, // 经销商服务经理
        svcMangerName: this.tableDataList[2].name,
        svcMangerTel: this.tableDataList[2].tel,
        clmPerson: this.tableDataList[3].userId, // 经销商索赔员
        clmPersonName: this.tableDataList[3].name,
        clmPersonTel: this.tableDataList[3].tel
      };
    },
    // 点击上传
    async handleUpload() {
      let { status, handlePerson, handleDate, remarks, id } = this.formData;
      let salerInfo = this.computeSalerInfo();
      // console.log(123, this.formData);
      try {
        this.tableDataList.forEach(element => {
          if (element.userId && !element.tel) {
            throw new Error("请输入姓名为''" + element.name + "'的联系电话");
          }
        });
      } catch (Error) {
        return notifyAction(Error.message, 'warning');
      }
      let res = await uploadPartFinancialStatement({
        status,
        handlePerson,
        handleDate,
        remarks,
        id,
        ...salerInfo
      });

      if (res.resultCode == 200) {
        notifyAction('上传成功', 'success');
        // messageAction('上传成功', 'success');
        this.$emit('reSearchMain');
        this.handleClose();
      }
    },
    // 点击保存
    async handSave(e) {
      let { status, handlePerson, handleDate, remarks, id } = this.formData;
      let salerInfo = this.computeSalerInfo();
      // console.log(123, this.tableDataList);
      try {
        this.tableDataList.forEach(element => {
          if (element.userId && !element.tel) {
            throw new Error("请输入姓名为''" + element.name + "'的联系电话");
          }
        });
      } catch (Error) {
        return notifyAction(Error.message, 'warning');
      }
      let res = await savePartFinancialStatementDetailById({
        status,
        handlePerson,
        handleDate,
        remarks,
        id,
        ...salerInfo
      });

      if (res.resultCode == 200) {
        notifyAction('上传成功', 'success');
        // messageAction('保存成功', 'success');
        this.$emit('reSearchMain');
        // this.handleClose();
        this.initData(this.detail.id);
      }
    },
    // 获取经办人列表(配件经理)
    async queryResponsiblePerson() {
      let roleParams = { role: dictCode.PART_MANAGER };
      let res = await searchRoleByCode(roleParams);

      this.peopleList = res.data.map(item => ({ text: item.employeeName, value: item.userId + '' }));
    },
    // 关闭本页
    handleClose() {
      this.$emit('close');
    },
    // 点击打印
    handlePrint() {
      this.printData = this.formData;
      this.printData.salerInfo = this.computeSalerInfo();
      this.printData.handlePersonName = this.peopleList.find(x => x.value == this.printData.handlePerson).text;
      // console.log(this.printData);
      this.$refs.print.EXCUTE_PRINT();
    }
  }
};
</script>

<style scoped>
h2 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
  letter-spacing: 5px;
  margin-bottom: 15px;
}
p {
  font-size: 14px;
  line-height: 20px;
}
.mgbtm20 {
  margin-bottom: 20px;
}
.mgtop30 {
  margin-top: 30px;
}
.topBtnWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content {
  text-indent: 2em;
}
.compInfo {
  text-align: right;
}

.signWrap {
  display: flex;
}
.signItem {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid black;
  position: relative;
  min-height: 260px;
}
.stampWrap {
  position: absolute;
  width: 100%;
  bottom: 10px;
  right: 10px;
}
.signItem:last-of-type {
  border-left: none;
}
.stampText {
  text-align: right;
  margin: 10px 0;
}
.signData {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}
.copyRightWrap {
  font-size: 10px;
  transform-origin: 0 0;
  transform: scale(0.8);
  margin-top: 15px;
}

.bottomBtnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
